<template>
  <el-container class="home-container">
    <el-aside :width="asideWidth" style="background-color: #151B2B">
      <el-row style="padding: 0 0">
        <el-col>
          <el-menu
              background-color="#151B2B"
              text-color="#fff"
              :default-active="$route.name"
              style="border-right:0"
              active-text-color="#AC30E8"
              :collapse="collapse"
              :collapse-transition="true"
              router
          >
            <div style="text-align: center;color: #E9E9E9;font-size: 5px;height: 20px" @click="changeAside">| | |
            </div>
            <div style="text-align: center">
              <img src="../assets/img/header.png">
            </div>
            <template v-for="(item,item_index) in menuList">
              <el-submenu v-if="item.children.length>0" :index="item.path">
                <template slot="title">
                  <i :class="item.style"></i>
                  <span>{{ item.authName }}</span>
                </template>
                <el-menu-item v-for="(menu,children_index) in item.children"
                              :index="menu.path">
                  <template slot="title">
                    <i :class="menu.style"></i>
                    <span>{{ menu.authName }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>

              <el-menu-item :index="item.path" v-else>
                <i :class="item.style"></i>
                <span slot="title">{{ item.authName }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
    <el-container>
      <el-header>
        <el-row class="header">
          <el-col class="title" :span="22" :offset="1">
            <div style="font-family: YeZiGongChangTangYingHei;font-size: 2.5rem">招聘数据可视化系统</div>
          </el-col>
          <el-col :span="2" class="avatar">
            <el-menu mode="horizontal" style="min-height: 0.01vh;height: 0.01vh">
              <el-submenu index="1" style="border: 0">
                <template slot="title">
                  <img
                      :src="avatar">
                </template>
                <el-menu-item>{{username}} </el-menu-item>
                <el-menu-item index="2-1" @click="$router.push({name:'Center'})">个人中心</el-menu-item>
                <el-menu-item index="2-2" @click="logout">退出登录</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
        <!--        <span>招聘数据可视化平台</span>-->
        <!--        <el-button @click="logout">退出登录</el-button>-->
      </el-header>
      <el-main style="background-color: #F2F2F2">
        <router-view></router-view>
      </el-main>
    </el-container>


  </el-container>
</template>

<script>
import router from "@/router";

export default {
  name: "Home",
  data() {
    return {
      username: this.getUserInfo().username,
      avatar:this.getUserInfo().avatar,
      menuList: [],
      methods: {},
      collapse: false,
      asideWidth: "18vw"
    }
  },
  methods: {
    router() {
      return router
    },
    changeAside() {
      this.collapse = !this.collapse
      this.asideWidth = this.collapse ? '4.5vw' : '18vw'
    }
  },
  mounted() {
    this.$http.get('/menus/').then(res => {
      this.menuList = res.data
      console.log(this.menuList)
    })
  }
}
</script>

<style lang="less" scoped>
img {
  width: 50px;
  margin: 0 auto;
}

.home-container{
  height: 100%;
  .header {
    display: flex;
    align-items: center; // 垂直居中，针对的是mycontainer类下面的子元素，不包含“孙子”元素
    justify-content: center; // 水平居中，针对的是mycontainer类下面的子元素，不包含“孙子”元素

  }

  .avatar {
    justify-content: center;
  }
}




/* 加过渡给侧边导航*/
.el-aside {
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -o-transition: width 0.25s;
}

/*加快侧边栏文字消失的速度*/
.el-menu {
  transition: all 10ms;
}

.el-menu.el-menu--horizontal {
  border: none;
}

</style>